import React, {Component} from 'react';
import {
  View,
  Text,
  ScrollView,
  TextInput,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Button,
} from 'react-native';
import {connect} from 'react-redux';
import {getVerifyCode, _sendToken} from '../../api/index';
import {deleteToken, setToastMsg} from '../../actions/index';
import {isPhone, isNumber, isInvitationCode} from '../../util/validation';
const {width} = Dimensions.get('window');
class Giving extends Component {
  getCode() {
    const {phone} = this.state;
    try {
      if (!phone.trim()) {
        throw '请输入手机号';
      }
      if (!isPhone(phone)) {
        throw '手机号格式错误';
      }
    } catch (e) {
      this.props.setToastMsg(e);
      return false;
    }
    this._getCode();
  }
  async _getCode() {
    let result = await getVerifyCode({phone: this.state.phone, flag: false});
    this.props.setToastMsg(result.message);
    // if (result.error_code === 0 || result.error_code === '0') {
    //   this.props.setToastMsg('发送成功！');
    // } else {
    //   this.props.setToastMsg('发送失败！');
    // }
  }
  sendToken() {
    try {
      if (!this.state.loginName.trim()) {
        throw '会员名称不能为空';
      }
      // if (!isNumber(this.state.account)) {
      //   throw '碱基数量格式有误';
      // }
      if (!isPhone(this.state.phone)) {
        throw '手机号格式错误';
      }
      if (!isInvitationCode(this.state.code)) {
        throw '验证码格式错误';
      }
    } catch (e) {
      this.props.setToastMsg(e);
      return false;
    }

    this._sendToken_();
  }
  async _sendToken_() {
    let param = {
      loginName: this.state.loginName,
      amount: this.state.amount,
      phone: this.state.phone,
      code: this.state.code,
    };
    console.log(param);
    let result = await _sendToken(param);
    if (result.error_code === 0 || result.error_code === '0') {
      this.props.setToastMsg('转赠成功！');
      this.props.deleteToken(parseFloat(this.state.amount || 0));
    } else {
      this.props.setToastMsg('转赠失败！');
    }
  }

  //判断转账的用户是否存在，转账的用户是不是自己本人
  checkUser() {
    this.props.setToastMsg('textbox on blur');
  }
  constructor(props) {
    super(props);
    this.state = {
      error_code: '1',
      isLoading: false,
      phone: '',
      code: '',
      account: '',
      loginName: '',
    };
  }
  render() {
    return (
      <ScrollView style={{backgroundColor: '#F3F7FA'}}>
        <View
          style={{
            width: width - 40,
            height: 169,
            backgroundColor: '#256AF5',
            marginLeft: 20,
            marginRight: 18,
            marginTop: 20,
            borderRadius: 5,
          }}>
          <Text
            style={{
              marginLeft: width / 2 - 30 - 20,
              color: '#FFFFFF',
              marginTop: 36,
              fontSize: 15,
              width: 60,
            }}>
            碱基总量
          </Text>
          <Text
            style={{
              marginLeft: width / 2 - 100 - 20,
              fontSize: 20,
              marginTop: 16,
              color: '#FFFFFF',
              width: 200,
              textAlign: 'center',
            }}>
            {this.props.tokens.toFixed(2)}
          </Text>
          <View
            style={{
              width: width - 60,
              height: 1,
              marginLeft: 10,
              marginTop: 31,
              backgroundColor: '#3C8AF6',
            }}
          />
          <View>
            <Text
              style={{
                marginTop: 10,
                color: '#FFFFFF',
                fontSize: 12,
                alignSelf: 'center',
              }}>
              输入对方用户名，您可以将自己的碱基装赠给他人
            </Text>
          </View>
        </View>
        <View
          style={{
            marginLeft: 20,
            marginTop: 16,
            width: width - 40,
            height: 216,
            backgroundColor: '#FFFFFF',
            borderRadius: 5,
          }}>
          <View
            style={{
              flexDirection: 'row',
              height: 53,
              width: 321,
            }}>
            <Text
              style={{
                fontSize: 14,
                textAlign: 'right',
                width: 101,
                marginTop: 16,
              }}>
              转赠会员
            </Text>
            <TextInput
              placeholder={'填写接收人用户名'}
              onChangeText={text => this.setState({loginName: text})}
              onBlur={() => this.checkUser()}
            />
          </View>
          <View
            style={{width: width - 50, height: 1, backgroundColor: '#E5E5E5'}}
          />
          <View
            style={{
              flexDirection: 'row',
              height: 53,
              width: 321,
            }}>
            <Text
              style={{
                fontSize: 14,
                textAlign: 'right',
                width: 101,
                marginTop: 16,
              }}>
              转赠碱基数量
            </Text>
            <TextInput
              placeholder={'填写碱基数量'}
              onChangeText={text => this.setState({amount: text})}
            />
          </View>
          <View
            style={{width: width - 50, height: 1, backgroundColor: '#E5E5E5'}}
          />
          <View
            style={{
              flexDirection: 'row',
              height: 53,
              width: 321,
            }}>
            <Text
              style={{
                fontSize: 14,
                textAlign: 'right',
                width: 101,
                marginTop: 16,
              }}>
              手机号
            </Text>
            <TextInput
              placeholder={'您的注册手机号'}
              onChangeText={text => this.setState({phone: text})}
            />
          </View>
          <View
            style={{width: width - 50, height: 1, backgroundColor: '#E5E5E5'}}
          />
          <View
            style={{
              flexDirection: 'row',
              height: 53,
              width: 321,
            }}>
            <Text
              style={{
                fontSize: 14,
                textAlign: 'right',
                width: 101,
                marginTop: 16,
              }}>
              密码
            </Text>
            <TextInput
              placeholder={'填写用户密码'}
              onChangeText={text => this.setState({code: text})}
            />
          </View>
          <View
            style={{width: width - 50, height: 1, backgroundColor: '#E5E5E5'}}
          />
        </View>
        <View style={{marginTop: 52, width: width - 40, marginLeft: 20}}>
          <Button
            style={styles.spacingH}
            onPress={this.sendToken.bind(this)}
            title={'转赠'}
          />
        </View>
      </ScrollView>
    );
  }
}
export default connect(
  state => ({
    tokens: state.home.token_count,
  }),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
    deleteToken: token => dispatch(deleteToken(token)),
  }),
)(Giving);
const styles = StyleSheet.create({
  spacingH: {
    marginRight: 18,
    marginLeft: 19,
    marginTop: 39,
  },
});
